<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {router} from "../router/index.js";
import { ElTag, ElButton, ElMessage ,ElMessageBox} from 'element-plus'
import axios from "axios";

const tableData = ref([]);

// 筛选条件
const filterForm = ref({})
const packageOptions = ref([])

// 分页
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(100)

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchData();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchData();
};

// 新增服务项目
const addService = () => {
  router.push(`/main/goToItems`)
}

// 编辑服务项目
const goToEdit = (row) => {
  router.push(`/main/goToItems?serviceId=${row.id}`)
}

// 删除服务项目
const goTODelete = (row) => {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(`/service/deleteService/${row.id}`).then(res => {
      ElMessage.success(res.data)
      fetchData();
    })
  }).catch(() => {
    ElMessage.info('已取消')
  })
}

// 实际项目中从API获取数据
const fetchData = () => {
  console.log(filterForm.value)
  // 模拟API请求
  axios.post(`/service/serviceList/${currentPage.value}/${pageSize.value}`, filterForm.value).then(res => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  })
}
//下拉框
const getType = () =>{
  axios.get(`/dropdown/getServiceType`).then(res => {
    packageOptions.value = res.data;
  })
}

// 清空筛选条件
const clear = () => {
  filterForm.value = {}
  fetchData();
}

onMounted(() => {
  fetchData();
  getType();
})
</script>

<template>
  <div class="service-container">
    <div class="header-container">
      <div class="blue-pillar"></div>
      <h1 class="service-title">服务项目管理</h1>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-row :gutter="20" class="filter-row">
        <el-col :span="6">
          <div class="filter-item">
            <span class="filter-label">项目类型</span>
            <el-select v-model="filterForm.type" placeholder="请选择项目类型" clearable>
              <el-option
                  v-for="item in packageOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="fetchData"
              />
            </el-select>
          </div>
        </el-col>

        <el-col :span="10">
          <div class="filter-item">
            <el-input
                v-model="filterForm.keyword"
                placeholder="请输入关键字"
                :suffix-icon="Search"
                @keyup.enter="fetchData"
                clearable
            />
          </div>
        </el-col>

        <el-col :span="8" class="action-buttons">
          <el-button @click="clear">清空</el-button>
          <el-button type="primary" @click="addService">新增服务项目</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table :data="tableData"   class="service-table" stripe>
        <el-table-column prop="id" label="项目编号" width="110" align="center" />
        <el-table-column prop="name" label="项目名称" width="150" align="center"/>
        <el-table-column prop="times" label="次数" width="100" align="center">
          <template #default="{ row }">{{ row.times }}</template>
        </el-table-column>
        <el-table-column prop="type" label="项目类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag>{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="项目原价 (元)" width="100" align="center">
          <template #default="{ row }">{{ row.price.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="description" label="项目介绍" width="230" align="center"/>
        <el-table-column label="操作" width="120" align="center">
          <template #default="all">
            <el-button link type="primary" @click="goToEdit(all.row)">编辑</el-button>
            <el-button link type="danger" @click="goTODelete(all.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-section">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination"
      />
    </div>
  </div>
</template>

<style scoped>
/* 颜色定义 */
:root {
  --primary-blue: #2984F8;
  --primary-red: #FA746B;
  --primary-green: #3DD4A7;
  --text-black: #333333;
  --text-gray: #666666;
  --border-light: #CCCCCC;
}

.service-container {
  padding: 20px;
  background: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.header-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.blue-pillar {
  border-radius: 15px !important;
  width: 8px;
  height: 28px;
  background: #2984F8;
  margin-right: 12px;
}
.service-title {
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  letter-spacing: 1px;
}


.filter-section {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  color: #666666;
  font-size: 12px;
  margin-right: 10px;
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* 表格样式 */
.service-table {
  width: 100%;
  margin-bottom: 20px;
}

.service-table :deep(th) {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.service-table :deep(td) {
  font-size: 13px;
  color: #666666;
}


.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.table-section {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.el-table {
  font-size: 14px;
}
</style>